<template>
  <div class="nucleic-ui">
    <div ref="topPart">
      <el-form
        :inline="true"
        size="mini"
        ref="form"
        :model="form"
        class="demo-form-inline"
      >
        <div class="border">
          <el-form-item label="统计范围">
            <el-select
              v-model="form.type"
              placeholder="请选择"
              @change="onSubmit"
            >
              <el-option
                v-for="item in regionalList"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="danger"
              @click="download"
              icon="el-icon-download"
              size="mini"
              >下载</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="nucleic-scroll">
      <el-table
        v-loading="loading"
        :data="tableList"
        border
        :style="{
          width: tableWidth + 'px',
        }"
        v-if="theight"
        :max-height="theight"
      >
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="'table' + index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.prop == 'number' ? 'right' : 'center'"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getStatis } from "@/api/files/basics";
export default {
  name: "DataAnalysis",
  data() {
    return {
      resizeFlag: null,
      regionalList: [
        {
          key: 1,
          value: "省",
        },
        {
          key: 2,
          value: "市",
        },
        {
          key: 3,
          value: "区",
        },
        {
          key: 4,
          value: "本地/省内/省外",
        },
      ],
      tableList: [],
      form: {
        type: 1,
      },

      loading: false,
      theight: 0,
      tableColumns: [
        { prop: "index", label: "序号", width: 70 },
        { prop: "province", label: "省", width: 160 },
        { prop: "number", label: "人数", width: 120 },
      ],
      tableWidth: 351,
    };
  },
  methods: {
    getStatis() {
      this.tableList = [];
      this.loading = true;
      let data = {
        type: this.form.type,
      };
      getStatis(data)
        .then((res) => {
          this.loading = false;
          if (res.data && res.data.length > 0) {
            let tableList = [];
            res.data.forEach((item, index) => {
              item.index = index + 1;
              tableList.push(item);
            });

            if (this.form.type == 1 || this.form.type == 4) {
              this.tableColumns = [
                { prop: "index", label: "序号", width: 70 },
                { prop: "province", label: "省", width: 160 },
                { prop: "number", label: "人数", width: 120 },
              ];
              this.tableWidth = 351;
            } else if (this.form.type == 2) {
              this.tableColumns = [
                { prop: "index", label: "序号", width: 70 },
                { prop: "province", label: "省", width: 160 },
                { prop: "city", label: "市", width: 160 },

                { prop: "number", label: "人数", width: 120 },
              ];
              this.tableWidth = 511;
            } else if (this.form.type == 3) {
              this.tableColumns = [
                { prop: "index", label: "序号", width: 70 },
                { prop: "province", label: "省", width: 160 },
                { prop: "city", label: "市", width: 160 },
                { prop: "county", label: "区", width: 160 },
                { prop: "number", label: "人数", width: 120 },
              ];
              this.tableWidth = 671;
            }
            this.tableList = tableList;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    onSubmit() {
      this.getStatis();
    },
    download() {
      let data = {
        type: this.form.type,
      };
      let fileName = this.regionalList[this.form.type - 1].value;
      this.downloadGet(
        "/extractArchives/extractStatistics/export",
        data,
        `${fileName}_数据统计.xlsx`
      );
    },
    async updateAdd() {
      let h =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight; //浏览器高度

      let tableHeight = h - 190;
      this.theight = tableHeight;
      console.log(this.theight);
      await this.$nextTick();
    },
  },
  mounted() {
    let _this = this;
    _this.getStatis();
    _this.updateAdd();
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.updateAdd();
        _this.resizeFlag = null;
      }, 100);
    };
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.border {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: 2px solid #ccc;
    left: 0;
    bottom: 0;
  }
}
.nucleic-ui {
  padding: 20px;
  .nucleic-fixed {
    position: fixed;
    top: 80px;
  }
  .pages {
    font-size: 14px;
    color: #333;
    span {
      color: #009688;
    }
    padding: 20px 0;
  }
  .nucleic-scroll {
    width: 100%;
    overflow: auto;
  }
}
.export-dialog {
  width: 100%;
  .detail-title {
    font-size: 14px;
    color: #333;
  }
  p {
    color: #999;
    font-size: 12px;
  }
}
.nucleic-st {
  &-normal {
    color: #606266;
  }
  &-exce {
    color: #f56c6c;
  }
  &-exc {
    color: #409eff;
  }
}
.nucleic-upload {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .text-center {
    margin-left: 10px;
  }
}
.nucleic-imp {
  overflow: hidden;
  clear: both;
  &-msg {
    float: left;
    font-size: 14px;
    > span {
      cursor: pointer;
    }
  }
  &-btn {
    float: right;
  }
}
.files-add-window {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: calc(100vh - 80px);
  background: #fff;
  z-index: 99;
}
</style>
<style rel="stylesheet/scss" lang="scss">
.n-dl {
  color: #409eff;
  cursor: pointer;
  &:hover {
    color: #409eff;
  }
}

.demo-form-inline.el-form--inline .el-form-item__label {
  float: left;
}
</style>